import React, { Component } from "react";
import { Container } from "./style";

// 引入antd组件
import { Input, Button, Tree, Table } from "antd";
// 引入antd样式文件
import "antd/dist/antd.css";

// 树形控件（二级菜单）
const treeData = [
  {
    title: "物品大类1",
    key: "0-0",
    children: [
      {
        title: "  物品分类1-1",
        key: "0-0-0",
      },
      {
        title: "  物品分类1-2",
        key: "0-0-1",
      },
      {
        title: "  物品分类1-3",
        key: "0-0-2",
      },
    ],
  },
  {
    title: "物品大类2",
    key: "0-1",
    children: [
      {
        title: "  物品分类2-1",
        key: "0-1-0",
      },
      {
        title: "  物品分类2-2",
        key: "0-1-1",
      },
    ],
  },
];

// 表格
const columns = [
  {
    title: "序号",
    className: "column-number",
    dataIndex: "number",
    align: "center",
    height: "44px",
  },
  {
    title: "物品名称",
    className: "column-name",
    dataIndex: "name",
    align: "center",
    height: "44px",
  },
  {
    title: "物品编码",
    className: "column-code",
    dataIndex: "code",
    align: "center",
    height: "44px",
  },
  {
    title: "物品分类",
    className: "column-sorts",
    dataIndex: "sorts",
    align: "center",
    height: "44px",
  },
  {
    title: "品牌",
    className: "column-brand",
    dataIndex: "brand",
    align: "center",
    height: "44px",
  },
  {
    title: "规格/型号",
    className: "column-size",
    dataIndex: "size",
    align: "center",
    height: "44px",
  },
  {
    title: "单位",
    className: "column-unit",
    dataIndex: "unit",
    align: "center",
    height: "44px",
  },
];

const data = [
  {
    key: "1",
    number: "1",
    name: "黑色签字笔",
    code: "hsqzb",
    sorts: "办公用品",
    brand: "得力",
    size: "pen16.04/0.5",
    unit: "只",
  },
  {
    key: "2",
    number: "2",
    name: "黑色签字笔芯",
    code: "heqzbx",
    sorts: "办公用品",
    brand: "得力",
    size: "gel16.04/0.5",
    unit: "只",
  },
  {
    key: "3",
    number: "3",
    name: "2B铅笔",
    code: "2Bqb",
    sorts: "办公用品",
    brand: "得力",
    size: "s907",
    unit: "只",
  },
  {
    key: "4",
    number: "4",
  },
  {
    key: "5",
    number: "5",
  },
];

class index extends Component {
     //弹窗
    //  fn(){
    //   var  box = document.querySelector(".box");
    //   box.style.display="none";
    // }




  render() {
    return (
      <Container>
        <div className="box">
          {/* <div className="title">
            <div className="square"></div>
            <p>物品档案</p>
            <i>X</i>
          </div> */}

          <div className="search">
            <Input placeholder="请输入物品编码" />
            <Input placeholder="请输入物品名称" />
            <Button size="large">查询</Button>
          </div>

          <div className="table">
            <div className="left">
              <p>物品分类</p>
              <div className="tt">最近入库</div>
              <div className="tt">全部物品</div>
              <Tree
                //   defaultExpandAll
                //   defaultSelectedKeys={["0-0-0"]}
                treeData={treeData}
              />
            </div>

            <div className="center">
              <div className="center-t">物品档案</div>
              <div className="center-b">
                <Table
                  className="table"
                  columns={columns}
                  dataSource={data}
                  bordered
                  pagination={false}
                />
              </div>
            </div>
            <div className="right">
              <div className="right-t">已选购物品(3)</div>
              <div className="right-b">
                <div>
                  <p>黑色签字笔</p>
                  <i>X</i>
                </div>
                <div>
                  <p>黑色签字笔芯</p>
                  <i>X</i>
                </div>
                <div>
                  <p>2B铅笔</p>
                  <i>X</i>
                </div>
              </div>
            </div>
          </div>

          {/* <div className="confirm">
            <div className="btn">
              <Button onClick={this.fn}>确认</Button>
              <Button>取消</Button>
            </div>
          </div> */}
        </div>
      </Container>
    );
  }
}

export default index;
